<template>
  <div class="app-container">
    <!-- 添加或修改工时记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="display: flex;flex-wrap: wrap;">
        <el-form-item label="工单编码" prop="workorderCode" class="form-item">
          <el-input v-model="form.workorderCode" placeholder="请输入工单编码" disabled />
        </el-form-item>
        <el-form-item label="产品编号" prop="productCode" class="form-item">
          <el-input v-model="form.productCode" placeholder="请输入产品编号" disabled />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName" class="form-item">
          <el-input v-model="form.productName" placeholder="请输入产品名称" disabled />
        </el-form-item>
        <el-form-item label="规格型号" prop="productSpc" class="form-item">
          <el-input v-model="form.productSpc" placeholder="请输入规格型号" disabled />
        </el-form-item>
        <el-form-item label="批次号" prop="batchCode" class="form-item">
          <el-input v-model="form.batchCode" placeholder="请输入批次号" disabled />
        </el-form-item>
        <el-form-item label="批号名称" prop="batchName" class="form-item">
          <el-input v-model="form.batchName" placeholder="请输入批号名称" disabled />
        </el-form-item>
        <el-form-item label="工单数量" prop="workorderQuantity" class="form-item">
          <el-input v-model="form.workorderQuantity" placeholder="请输入批号名称" disabled />
        </el-form-item>
        <div class="form-item"></div>
        <el-form-item label="SN码" prop="snCode" class="form-item">
          <el-input v-model="form.snCode" placeholder="请输入SN码" />
        </el-form-item>
        <el-form-item label="填报数量" prop="recordQuantity" class="form-item">
          <el-input v-model.number="form.recordQuantity" placeholder="请输入填报数量" />
        </el-form-item>
        <el-form-item label="产线名称" prop="lineName" class="form-item">
          <el-select v-model="form.lineName" placeholder="请选择产线名称" @change="val => lineChange(val, 'form')"
            style="width:100%;">
            <el-option v-for="item in lineList" :key="item.lineNo" :label="item.lineName"
              :value="item.lineName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产线ID" prop="lineId" class="form-item" v-show="false">
          <el-input v-model="form.lineId" placeholder="请输入产线ID" />
        </el-form-item>
        <el-form-item label="工序名称" prop="processName" class="form-item">
          <el-select v-model="form.processName" placeholder="请选择工序名称" @change="val => processChange(val, 'form')"
            style="width:100%;">
            <el-option v-for="item in processList" :key="item.processId" :label="item.processName"
              :value="item.processName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工序ID" prop="processId" class="form-item" v-show="false">
          <el-input v-model="form.processId" placeholder="请输入工序ID" />
        </el-form-item>
        <el-form-item label="正常工时(分)" prop="normalWorkinghours" class="form-item">
          <el-input v-model="form.normalWorkinghours" placeholder="请输入正常工时" />
        </el-form-item>
        <el-form-item label="异常工时(分)" prop="abnormalWorkinghours" class="form-item" style="flex:0 0 50%;">
          <el-input v-model="form.abnormalWorkinghours" placeholder="请输入异常工时" />
        </el-form-item>
        <el-form-item label="录入原因" prop="inputReason" class="form-item">
          <el-select v-model="form.inputReason" placeholder="请选择录入原因" style="width:100%;">
            <el-option v-for="item in recordResonList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <div class="form-item"></div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRecord,
  getRecord,
  delRecord,
  addRecord,
  updateRecord,
  getWorkInfo,
  getAllLineList,
  getAllProcessList
} from "@/api/mes/workinghours/record";
import { dataTool } from 'echarts';
export default {
  name: "Record",
  dicts: ["mes_order_type"],
  data() {
    var checkRecordQuantity = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('填报数量不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 0) {
            callback(new Error('不能为负数'));
          } else if (value > this.form.workorderQuantity) {
            callback(new Error('填报数量不能大于工单数量'));
          } else {
            callback()
          }
        }
      }, 100);
    };
    return {
      recordResonList: [
        {
          label: '来料异常',
          value: 1,
        },
        {
          label: '设备异常',
          value: 2,
        },
        {
          label: '其他',
          value: 3,
        },
      ],
      workorderId: null,
      lineList: [],
      processList: [],
      // 弹出层标题
      title: "添加工时记录",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        workorderCode: null,
        productCode: null,
        productName: null,
        productSpc: null,
        snCode: null,
        lineId: null,
        lineName: null,
        processId: null,
        processName: null,
        normalWorkinghours: null,
        abnormalWorkinghours: null,
        batchCode: null,
        batchName: null,
        recordQuantity: null,
        workorderQuantity: null,
        inputReason: null,

      },
      // 表单校验
      rules: {
        workorderCode: [
          { required: true, message: "工序名称不能为空", trigger: "blur" }
        ],
        inputReason: [
          { required: true, message: "录入原因不能为空", trigger: "change" }
        ],
        recordQuantity: [
          { type: 'number', message: '填报数量必须为数字值' },
          { required: true, message: '填报数量不能为空' },
          { validator: checkRecordQuantity, trigger: 'blur' }
        ],
        normalWorkinghours: [
          { required: true, message: "正常工时(分)不能为空", trigger: "change" }
        ],
      }
    };
  },
  created() {
    this.getAllLineList();
    this.getAllProcessList();
  },
  mounted() {

  },
  methods: {
    handleAddRecord(workorderId) {
      this.workorderId = workorderId
      this.reset();
      this.open = true;
      let param = {
        workorderId: workorderId,
      }
      getWorkInfo(param).then(res => {
        const { data } = res;
        this.form.workorderCode = data.workorderCode;
        this.form.productCode = data.productCode;
        this.form.productName = data.productName;
        this.form.productSpc = data.productSpc;
        this.form.batchCode = data.batchCode;
        this.form.batchName = data.batchName;
        this.form.orderTypeName = data.orderTypeName;
        this.form.workorderQuantity = data.quantity
      })
    },
    lineChange(val, formName) {
      console.log(val, formName);
      console.log(this.lineList);
      console.log(this.lineList.find(item => item.lineName === val));
      if (val) {
        this[formName].lineId = this.lineList.find(
          item => item.lineName === val
        ).lineNo;
      } else {
        this[formName].lineId = val;
      }
    },
    processChange(val, formName) {
      if (val) {
        this[formName].processId = this.processList.find(
          item => item.processName === val
        ).processId;
      } else {
        this[formName].processId = "";
      }
    },
    getAllLineList() {
      getAllLineList().then(res => {
        this.lineList = res.data;
      });
    },
    getAllProcessList() {
      getAllProcessList().then(res => {
        this.processList = res.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        workorderCode: null,
        productCode: null,
        productName: null,
        productSpc: null,
        snCode: null,
        lineId: null,
        lineName: null,
        processId: null,
        processName: null,
        normalWorkinghours: null,
        abnormalWorkinghours: null,
        batchCode: null,
        batchName: null,
        recordQuantity: null,
        workorderQuantity: null,
        inputReason: null,
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (!this.form.normalWorkinghours && !this.form.abnormalWorkinghours) {
            return this.$message.error("正常工时和异常工时不能全为空!");
          }
          this.form.workorderId = this.workorderId
          addRecord(this.form).then(response => {
            this.$modal.msgSuccess("工时填报成功");
            this.open = false;
          });
        } else {
          return false
        }
      });
    },
  }
};
</script>
<style scoped>
.form-item {
  flex: 50%;
}
</style>
